<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button appDebounceClick (debounceClick)="cancel()">
          <!-- <ion-icon name="close" class="close-icon"></ion-icon> -->
        <img  src="/assets/icon/nav_icon_close@3x.png" class="backBtnStyle">
      </ion-button>
    </ion-buttons>
    <ion-title>详细地址</ion-title>
    <ion-buttons slot="end">
      <ion-button appDebounceClick (debounceClick)="goBack()" class="text-color-orange">
        确定
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
  <form [formGroup]="FormGroup">
      <List>
          <ng-container  *ngFor="let item of data.item" [ngSwitch]="item.type">  
              <ng-container  *ngSwitchCase="'gotoPage'">
                <ion-item  class="post-item" appDebounceClick (debounceClick)="showCityModel(item)" >
                    <ion-label>{{item.label}}</ion-label>
                    <!-- <ion-input type="text" attr.placeholder="{{item.hint}}" [formControlName]="item.name"></ion-input> -->
                    <input type="text" [attr.placeholder]="item.hint"
                            [formControlName]="item.field" class="displayno" [readonly]="item.isDisabled">
                    <span class="input" [ngClass]="{'gray': item.isDisabled === true}" *ngIf="item.value">{{item.cityName}}</span>
                    <span class="input lightgrey"  *ngIf="!item.value">{{item.hint}}</span>
                    <i class="detail-icon"></i>
                </ion-item>
            </ng-container>
      
            <ng-container  *ngSwitchCase="'text'">
              <ng-container *ngIf="!item.writable">
                  <ion-item class="post-item">
                      <ion-label>{{item.label}}</ion-label>
                      <ion-input type="text"  [maxlength]="item.maxLength" [attr.placeholder]="item.hint" [formControlName]="item.field" [readonly]="item.isDisabled" appDebounceClick (debounceClick)="inputClick(item)" [ngClass]="{'gray': item.isDisabled === true}">
                      </ion-input>
                      <span *ngIf="item.jointEnd">{{item.jointEnd}}</span>
                      </ion-item>
              </ng-container>
          </ng-container>

          <ng-container  *ngSwitchCase="'dropDownBox'">
              <!-- <ion-item class="post-item"> -->
                  <ListItem
                      Picker
                      [extra]="item.checkLabel"
                      [arrow]="'horizontal'"
                      [cascade]="true"
                      [ngModel]="item.value"
                      [data]="item.itemList"
                      [formControlName]="item.field"
                      (ngModelChange)="onOk2($event,item)"
                      [disabled]="item.isDisabled"
                      appDebounceClick (debounceClick)="inputClick(item)" 
                      >
                      {{item.label}}
                  </ListItem>
              <!-- </ion-item> -->
          </ng-container>
      
          <ng-container  *ngSwitchCase="'dropDownSelect'">
            <ion-item class="post-item">
                <ion-label>{{item.label}}</ion-label>
                <ion-select [formControlName]="item.field" placeholder="{{item.hint}}" [(ngModel)]="item.value"  [multiple]="item.multipleSelect"
                            cancelText="取消" okText="确定" >
                    <ion-select-option  *ngFor="let opt of item.dropDownList.dropDownItem"
                                        [value]="opt.code">{{opt.name}}</ion-select-option>
                </ion-select>
                <span *ngIf="item.jointEnd">{{item.jointEnd}}</span>
            </ion-item>
            <ng-container *ngIf="item.value==='-1'">
                <ion-item  class="post-item">
                        <ion-label>{{item.itemObj.label}}</ion-label>
                        <ion-input type="text"  [maxlength]="item.maxLength" attr.placeholder="{{item.itemObj.hint}}" [formControlName]="item.itemObj.field"></ion-input>
                        <span *ngIf="item.jointEnd">{{item.itemObj.jointEnd}}</span>
                </ion-item>
            </ng-container>
          </ng-container>
      
          <ng-container  *ngSwitchCase="'address'">
            <ion-item id="showSelectAddressModelId"  class="post-item" appDebounceClick (debounceClick)="showSelectAddressModel(item)">
                <ion-label>{{item.label}}</ion-label>
                <ion-input type="text" [attr.placeholder]="item.hint"
                            [formControlName]="item.field" class="displayno"></ion-input>
                <span class="input" *ngIf="item.value">{{item.value}}</span>
                <span class="input lightgrey"  *ngIf="!item.value">{{item.hint}}</span>
                <img class="icon-map" width="8%" src="assets/icon/release_icon_location@3x.png" alt="">
                <!-- <ion-input type="text" attr.placeholder="{{item.hint}}"  appDebounceClick (debounceClick)="showSelectAddressModel()" [formControlName]="item.name"></ion-input> -->
            </ion-item>
         </ng-container>
         </ng-container>
        </List>
  </form>
</ion-content>